<template>
    <div style="height: 50px;">
        <el-button @click="add()">新增</el-button>
        <el-button @click="upd()">修改</el-button>
        <el-button @click="del()">删除</el-button>
        <el-button @click="Export()">导出</el-button>
    </div>


    <!-- 查询条件 -->
    <el-form :inline="true" :model="show" class="demo-form-inline">
        <el-form-item label="补料编号">
            <el-input v-model="show.FeNumber" clearable />
        </el-form-item>
        <el-form-item label="补料日期">
            <el-date-picker v-model="show.Fstate" type="date" placeholder="开始日期" value-format="YYYY-MM-DD"
                clearable />-<el-date-picker v-model="show.Fend" type="date" value-format="YYYY-MM-DD"
                placeholder="结束日期" clearable />
        </el-form-item>
        <el-form-item label="出库状态">
            <el-select v-model="show.FeOutState" placeholder="全部" style="width: 200px;" clearable>
                <el-option label="申请完毕，未出库" :value="1" />
                <el-option label="申请完毕，部分出库" :value="2" />
                <el-option label="出库完毕" :value="3" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="GetFeedProduct()">查询</el-button>
        </el-form-item>
    </el-form>


    <!-- 列表 -->
    <div style="font-weight: bold; font-size: 25px; text-align: center;">生产补料列表</div>
    <el-table :data="FeedProductlist" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" align="center" />
        <el-table-column prop="feNumber" label="生产补料编号" align="center">
            <template v-slot="scope">
                <a @click="bianhao(scope.row)">{{ scope.row.feNumber }}</a>
            </template>
        </el-table-column>
        <el-table-column prop="feNumTotal" label="补料数量合计" align="center" />
        <el-table-column prop="feDate" label="补料日期" align="center">
            <template v-slot="scope">
                {{ scope.row.feDate.substring(0, 10) }}
            </template>
        </el-table-column>
        <el-table-column prop="feOutState" label="出库状态" align="center">
            <template v-slot="scope">
                {{ scope.row.feOutState == 1 ? "申请完毕，未出库" : scope.row.feOutState == 2 ? "申请完毕，部分出库" : "出库完毕" }}
            </template>
        </el-table-column>
    </el-table>


    <!-- 分页 -->
    <table style="margin: auto;">
        <tr>
            <td>
                <el-pagination v-model:current-page="show.Pindex" v-model:page-size="show.Psize"
                    :page-sizes="[15, 20, 30, 40]" :background="true" layout="total,slot,sizes" :total="show.lcount">
                    <span> , 每页 {{ show.Psize }} 条，当前 {{ show.Pindex }} / {{ show.pcount }} 条</span>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="show.Pindex" v-model:page-size="show.Psize"
                    :page-sizes="[15, 20, 30, 40]" :background="true" prev-text="上一页" next-text="下一页"
                    layout="slot, prev, pager, next" :total="show.lcount">
                    <el-button :disabled="show.Pindex == 1" @click="show.Pindex = 1">首页</el-button>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="show.Pindex" v-model:page-size="show.Psize"
                    :page-sizes="[15, 20, 30, 40]" :background="true" prev-text="上一页" next-text="下一页"
                    layout="slot, jumper" :total="show.lcount">
                    <el-button :disabled="show.Pindex == show.pcount" @click="show.Pindex = show.pcount">尾页</el-button>
                </el-pagination>
            </td>
        </tr>
    </table>
</template>

<script setup lang='ts'>
import axios from 'axios'
import * as XLSX from 'xlsx';
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';
const router = useRouter();
import http from '../../../http.js'

//查询条件
const show = reactive({
    Pindex: 1,
    Psize: 10,
    FeNumber: "",
    Fstate: "",
    Fend: '',
    FeOutState: '',
    lcount: 0,
    pcount: 0
})

//补料显示
const FeedProductlist = ref([])
const GetFeedProduct = () => {
    axios.get(http.zblnb + '/sc/api/Feeding/GetFeedProduct', {
        params: {
            Pindex: show.Pindex,
            Psize: show.Psize,
            FeNumber: show.FeNumber || '',
            Fstate: show.Fstate || '',
            Fend: show.Fend || '',
            FeOutState: show.FeOutState || '',
        }
    })
        .then(res => {
            FeedProductlist.value = res.data.data.list;
            show.lcount = res.data.data.lcount
            show.pcount = res.data.data.pcount
            console.log(res.data.data);
        })
}

//多选框
const check = ref([])
const handleSelectionChange = (val: User[]) => {
    check.value = val
    console.log(check.value)
}

//跳转添加
const add = () => {
    router.push('/AddFeeding');
}

//删除条件
const DELinfo = ref({
    "feedProductId": [],
    "delName": "string",
    "office_Id": "string",
    "user_Id": 0
})

//删除
const del = () => {
    ElMessageBox.confirm(
        '确认删除吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error',
        }
    )
        .then(() => {
            let ids = check.value.map(ele => ele.feedProductId);
            DELinfo.value.feedProductId = ids
            axios.post(http.zblnb + '/sc/api/Feeding/DelFeedProduct', DELinfo.value)
                .then(res => {
                    if (res.data.data > 0) {
                        ElMessage.success('删除成功')
                        GetFeedProduct();
                    }
                    else {
                        ElMessage.error('删除失败');
                    }
                })
                .catch(err => {
                    console.log(err);
                })
        })
        .catch(() => {

        })
}

//导出
const Export = () => {
    ElMessageBox.confirm('是否确认导出?', '警告', {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: 'warning',
    })
        .then((res) => {
            if (check.value.length <= 0) {
                ElMessage.warning('请选择数据!');
                return;
            }
            //表头
            let tableData = [
                ['序号', '生产补料编号', '补料数量合计', '补料日期', '出库状态']
            ]
            check.value.forEach((item, index) => {
                let rowData = []
                //导出内容的字段
                rowData = [
                    index + 1,
                    item.feNumber,
                    item.feNumTotal,
                    item.feDate,
                    item.feOutState,
                ]
                tableData.push(rowData)
            })
            let workSheet = XLSX.utils.aoa_to_sheet(tableData);
            let bookNew = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(bookNew, workSheet, '生产补料') // 工作簿名称
            let name = '生产补料' + '.xlsx'
            XLSX.writeFile(bookNew, name) // 保存的文件名
        })
}

//修改
const upd = () => {
    let FeNumber = check.value.map(ele => ele.feNumber)
    let feedingId = check.value.map(ele => ele.feedingId)
    console.log(FeNumber)
    console.log(feedingId)
    router.push('/UpdFeeding?FeNumber=' + FeNumber + '&feedingId=' + feedingId);
}


//点击生产补料编号的查看详情
const bianhao = (row: any) => {
    console.log(row)
    var feNumber = row.feNumber;
    var feedingId = row.feedingId;
    console.log(feNumber)
    console.log(feedingId)
    router.push('/FeedingDetail?FeNumber=' + feNumber + '&feedingId=' + feedingId);
}



onMounted(() => {
    GetFeedProduct();
})


</script>

<style></style>